<template>
	<tm-fullView>
		<tm-menubars title="tm-grid 九宫格" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">九宫格不带边框</view>
			<tm-grid @click-dot="iconClick"  @change="change" color="blue" :list="list3" ></tm-grid>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">自定右上边角标图标</view>
			<tm-grid @click-dot="iconClick"  @change="change" color="blue" :list="list2" ></tm-grid>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">九宫格带边框</view>
			<tm-grid :grid="3" @change="change" color="blue" :list="list" :border="true"></tm-grid>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmGrid from "@/tm-vuetify/components/tm-grid/tm-grid.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmGrid},
		data() {
			return {
				show:true,
				list3:[
					{icon:'icon-QQ',text:'QQ',color:'blue'},
					{icon:'icon-weibo',text:'微博',iconSize:40,color:'blue'},
					{icon:'icon-pengyouquan',text:'朋友圈',color:'green',fontColor:'green'},
					{icon:'icon-aliwangwang',text:'阿里旺旺',color:'blue-grey'},
				],
				list2:[
					{icon:'icon-QQ',text:'QQ',color:'blue',dot:true,dotIcon:'icon-minus'},
					{icon:'icon-weibo',text:'微博',iconSize:40,color:'blue',dot:true,dotIcon:'icon-check'},
					{icon:'icon-pengyouquan',text:'朋友圈',color:'green',fontColor:'green',dot:true,dotIcon:'icon-clock'},
					{icon:'icon-aliwangwang',text:'阿里旺旺',color:'blue-grey',dot:true,dotIcon:'icon-redo'},
				],
				list:[
					{icon:'icon-QQ',text:'QQ',dot:true},
					{icon:'icon-weibo',text:'微博',iconSize:40,dot:true},
					{icon:'icon-pengyouquan',text:'朋友圈',dot:true},
					{icon:'icon-aliwangwang',text:'阿里旺旺',dot:true},
					{icon:'icon-pengyouquan',text:'朋友圈'},
					{icon:'icon-pengyouquan',text:'朋友圈'},
				]
			}
		},
		methods: {
			change(e){
				this.$tm.toast(`点击了：${e.index},数据为：${JSON.stringify(e.data)}`)
			},
			iconClick(e){
				console.log(5);
			}
		}
	}
</script>

<style>

</style>
